let { form, $, table, layer, laydate, upload, err } = layui;
const { createEditor, createToolbar, } = window.wangEditor;
let tmpHtml = "";

export default class Update {
  constructor(obj) {
    this.render();
    this.handle(obj)
  }
  render() {
    let template = `
        <form class="layui-form  addMessage" action="" lay-filter="updateInfos">    
        <div class="layui-form-item addTitle ">
          <label class="layui-form-label">标题</label>
          <div class="layui-input-inline">
            <input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item addCreateTime">
                <label class="layui-form-label">发表时间</label>
                <div class="layui-input-inline">
                  <input type="text" name="createTime" required lay-verify="required" placeholder="" autocomplete="off"
                    class="layui-input">
                </div>

        <div class="layui-form-item addreateTime">
          <label class="layui-form-label">浏览人数</label>
          <div class="layui-input-inline">
            <input type="text" name="watches" required lay-verify="required" placeholder="" autocomplete="off"
              class="layui-input">
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">修改文图</label>
            <div class="layui-input-inline" style="border: 1px solid;width: 600px;margin-left:50px">
              <div id="toolbar-container" style="width: 600px;"></div>
              <div id="editor-container" style="width: 600px;height: 200px;"></div>
            </div>
        </div>
      </form>
        `;
    $("#updateTemplate").html(template)
  }

  handle(obj) {
    let editor;
    let toolbar
    $.ajax({
      type: "get",
      url: "/infos/" + obj.data._id, //获取id得到id对应的信息，再进行修改
      success(res) {
        // form.render()
        // console.log(res);
        form.val("updateInfos", res.data) //res.data覆盖了updateInfos里面的值，相当于一个渲染
        editor.dangerouslyInsertHtml(res.data.content);
        console.log(res.data.content);
      }
    })
    layer.open({
      type: 1,
      title: '修改资讯信息',
      skin: 'layui-layer-molv',
      content: $("#updateTemplate").html(),
      area: ['700px', '700px'],
      btn: ['确认', '取消'],
      success: function () {
        //设置富文本编辑器
      form.render(),  //页面再次渲染     
      laydate.render({
        elem: '[name=createTime]',//弹出层的日期name=time
        type: 'datetime',
      });
      const editorConfig = {
        placeholder: "请输入内容",
        MENU_CONF: {  //上传照片必须有这个
          uploadImage: {
            // 小于该值就插入 base64 格式（而不上传），默认为 0
            base64LimitSize: 1024 * 1024 * 10, // 10M
          },
        },
        onChange(editor) {
          // 当编辑器选区、内容变化时，即触发
          tmpHtml = editor.getHtml();
          console.log(tmpHtml);
        },
      };
      // 创建编辑器
      editor = createEditor({
        selector: '#editor-container',
        config: editorConfig,
        mode: 'default', //默认模式 - 集成了 wangEditor 所有功能
      })
            // 创建工具栏
            toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        mode: 'default'
      })

    },
      yes: function (index, layero) {
        let updateInfos = form.val("updateInfos");//点击确认后才能获得表单内容
        $.ajax({
          type: "put",
          url: "/infos/" + obj.data._id,
          data: {
            ...form.val("updateInfos"),  //拓展运算符，获取弹出层和富文本的内容
            content: tmpHtml,
          },
          success(res) {
            table.reload("infosTable"),
              layer.close(index)
          }
        })
      }
    })
}
}
